<template>
	<view class="status-popup">
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="popup-content">
				<view class="popup-title">选择状态</view>

				<!-- 状态选项列表 -->
				<view class="status-list">
					<view v-for="(item, index) in statusList" :key="index" class="status-item"
						:class="{ 'status-item-active': currentStatus === item.value }" @tap="selectStatus(item.value)">
						<text class="status-text">{{ item.label }}</text>
						<text v-if="currentStatus === item.value" class="uni-icon-checkmarkempty status-icon"></text>
					</view>
				</view>

				<!-- 底部按钮 -->
				<view class="popup-buttons">
					<button class="btn-cancel" @tap="handleCancel">取消</button>
					<button class="btn-confirm" @tap="handleConfirm" type="primary">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../api/api'
	export default {
		data() {
			return {
				statusList: [{
						label: '进行中',
						value: '100'
					},
					{
						label: '已完成',
						value: '101'
					},
					{
						label: '已取消',
						value: '103'
					}
				],
				currentProject: null,
				currentStatus: null
			}
		},
		methods: {
			// 打开弹窗
			open(project) {
				this.currentProject = project
				this.currentStatus = project.status
				this.$refs.popup.open()
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 选择状态
			selectStatus(status) {
				this.currentStatus = status
			},
			// 取消操作
			handleCancel() {
				this.close()
			},
			// 确认操作
			handleConfirm() {
				if (!this.currentStatus) {
					uni.showToast({
						title: '请选择状态',
						icon: 'none'
					})
					return
				}
				if (this.currentStatus === this.currentProject.status) {
					uni.showToast({
						title: '与原状态相同',
						icon: 'none'
					})
					return
				} else {
					api.changeProjectStatus({
						projectId: this.currentProject.projectId,
						newStatus: this.currentStatus
					}).then(re => {
						this.$emit('changeProjectStatus')
						this.close()
					})

				}

			}
		}
	}
</script>

<style lang="scss">
	.status-popup {
		.popup-content {
			width: 600rpx;
			border-radius: 24rpx;
			padding: 40rpx;
			box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
		}

		.popup-title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 600;
			margin-bottom: 40rpx;
			color: #333;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -16rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background: #007aff;
				border-radius: 2rpx;
			}
		}

		.status-list {
			margin-bottom: 40rpx;
		}

		.status-item {
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			background-color: #f8f8f8;
			transition: all 0.3s ease;

			&:last-child {
				margin-bottom: 0;
			}

			&:active {
				transform: scale(0.98);
			}

			&-active {
				background-color: #eef6ff;
				border: 2rpx solid #007aff;
			}
		}

		.status-text {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}

		.status-icon {
			color: #007aff;
			font-size: 44rpx;
		}

		.popup-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			button {
				width: 250rpx;
				height: 88rpx;
				line-height: 88rpx;
				margin: 0;
				font-size: 30rpx;
				border-radius: 44rpx;
				font-weight: 500;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
				}

				&.btn-cancel {
					background-color: #f5f5f5;
					color: #666;

					&:active {
						background-color: #eee;
					}
				}

				&.btn-confirm {
					background: linear-gradient(135deg, #1890ff 0%, #007aff 100%);
					box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.2);

					&:active {
						box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
					}
				}
			}
		}
	}
</style>